<template>
  <el-container style="height: 100%;">
    <el-header>
      <el-row :gutter="20" style="color:#000">
        <el-col :span="12">
          <div style="font-size: 20px; font-weight: 900;height: 60px;display: flex;align-items: center;">
            <img src="static/img/login-logo.png" alt="" style="width: 45px;height: 45px;margin-right: 15px;">
            <div style="display: flex;flex-direction: column;">
              <span>美易通</span>
              <span style="font-size: 12px">v{{appVersion}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="display: flex">   
          <div style="font-size: 20px; font-weight: 900;height: 60px;display: flex;align-items: center;width: 100%;justify-content: flex-end;">
            <div style="height: 60px;line-height: 60px;margin-right: 20px;">
              <el-tooltip class="item" effect="dark" content="问题与反馈" placement="top-start">
                <i class="el-icon-h-duanxin1" style="cursor: pointer;outline: none;" @click="openQuestion"></i>
              </el-tooltip>
            </div>
            <div style="float: right;display: flex;align-items: center;height: 60px">
              <headImg :imgUrl="admin.headimg" size="50"></headImg>
              <el-dropdown>
                <span style="margin-left:10px; cursor: pointer">
                          {{admin.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="editAdmin">个人信息</el-dropdown-item>
                  <el-dropdown-item @click.native="changePassword">更改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="quit" id="zhuxiao">注销</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(84, 92, 100)">
        <el-menu router background-color="#545c64" text-color="#fff">
          <el-submenu index="11">
            <template slot="title"><i class="el-icon-menu"></i>首页</template>
            <el-menu-item index="/shop">数据分析</el-menu-item>
          </el-submenu>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-h-bumen"></i>基础管理</template>
            <el-menu-item index="/shop/bumenList">部门列表</el-menu-item>
            <el-menu-item index="/shop/userList">员工列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-h-guke1"></i>客户管理</template>
            <el-menu-item index="/shop/guestList">客户列表</el-menu-item>
            <el-menu-item index="/shop/guestAppoint" v-qx="quanxian.guestAppoint">客户预约</el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="12">
                        <template slot="title"><i class="el-icon-menu"></i>品牌厂商</template>
                        <el-menu-item index="/factoryList">厂商管理</el-menu-item>
                        <el-menu-item index="/brandList">品牌管理</el-menu-item>
                    </el-submenu> -->
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-h-wendang"></i>品项管理</template>
            <el-menu-item index="/shop/subjectList">项目列表</el-menu-item>
            <el-menu-item index="/shop/goodsList">产品列表</el-menu-item>
            <el-menu-item index="/shop/shopGoodsList">自营商品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-h-vipcard"></i>卡项管理</template>
            <el-menu-item index="/shop/cardList">卡项列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-h-kaidan"></i>经营管理</template>
            <el-menu-item index="/shop/openCardList">开卡列表</el-menu-item>
            <el-menu-item index="/shop/orderList">开单列表</el-menu-item>
            <el-menu-item index="/shop/rechargeList">充值列表</el-menu-item>
            <el-menu-item index="/shop/debtList">欠款列表</el-menu-item>
            <el-menu-item index="/shop/backCardList">退卡退款</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title"><i class="el-icon-h-yue3"></i>财务管理</template>
            <el-menu-item index="/shop/accountList">收款帐号</el-menu-item>
            <el-menu-item index="/shop/checkList">提成分配</el-menu-item>
            <el-menu-item index="/shop/backCheckList">提成扣除</el-menu-item>
            <el-menu-item index="/shop/userPayList">员工工资</el-menu-item>
            <el-menu-item index="/shop/costList">费用收支</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-h-yue"></i>资金信息</template>
            <el-menu-item index="/shop/moneyList">资金流量</el-menu-item>
            <el-menu-item index="/shop/featList">部门业绩</el-menu-item>
            <el-menu-item index="/shop/otherShopFeat">跨店消费</el-menu-item>
            <el-menu-item index="/shop/subjectFeat">项目消费</el-menu-item>
          </el-submenu>
          <el-submenu index="8">
            <template slot="title"><i class="el-icon-h-liushi1"></i>库存管理</template>
            <el-menu-item index="/shop/stockList">库存列表</el-menu-item>
            <el-menu-item index="/shop/pickList">领料记录</el-menu-item>
            <el-menu-item index="/shop/stockLog">库存记录</el-menu-item>
          </el-submenu>
          <el-submenu index="9">
            <template slot="title"><i class="el-icon-h-chakan"></i>权限管理</template>
            <el-menu-item index="/shop/permissionLevel">权限等级</el-menu-item>
            <el-menu-item index="/shop/adminRule">账号权限</el-menu-item>
          </el-submenu>
          <el-submenu index="10">
            <template slot="title"><i class="el-icon-h-set2"></i>基础设置</template>
            <el-menu-item index="#" @click="openSetting">基础设置</el-menu-item>
            <el-menu-item index="/shop/erWeiMa">客户二维码</el-menu-item>
            <el-menu-item index="#" @click="openMiniProgram" v-qx="quanxian.miniProgram">小程序设置</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="background-color: #F0F3F3">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import C from '@/common/common.js'
import Setting from '@/service/shop/setting.js'
import headImg from '@/components/headImg.vue'
import { ipcRenderer } from 'electron'
export default {
  name: 'app',
  data () {
    return {
      admin: { headimg: '' },
      appVersion: '',
      quanxian: {
        miniProgram: 'miniProgram_index',
        guestAppoint: 'miniProgram_guestAppoint'
      }
    }
  },
  methods: {
    openSetting () {
      Setting.openSetting()
    },
    async getAdminInfo () {
      let data = await C.ajax('/shop/index/getadmininfo', {}, 'post')
      this.admin = data.ainfo
      C.setLocalStorage('initConfig', JSON.stringify(data.initConfig))
    },
    async editAdmin () {
      await C.openBrowserWindow('/editAdmin', {}, {
        transparent: true,
        frame: false,
        // openDevTools: true,
        width: 390,
        height: 600,
        useSpa: false,
        spaModel: 'shop'
      })
    },
    async changePassword () {
      let res = await C.openBrowserWindow('/changePassword', {}, {
        transparent: true,
        frame: false,
        // openDevTools: true,
        width: 390,
        height: 300,
        useSpa: false,
        spaModel: 'shop'
      })
      if (res) {
        C.success(res.data.info)
      }
    },
    quit () {
      C.confirm('确定要退出吗？', async () => {
        await C.ajax('/login/public/logout', {}, 'post')
        C.setLocalStorage('permission')
        C.setLocalStorage('initConfig')
        C.setLocalStorage('usertoken')
        // 打开登录关闭本窗口aaaaaa
        ipcRenderer.send('zhuxiao')
      })
    },
    checkBigVersion (v1, v2) {
      v1 = v1.split('.')
      v2 = v2.split('.')
      // 先用文字描述逻辑
      // 首先如果主版本1大于主版本2，说明1大
      // 如果主版本1等于主版本2 继续往下比较
      let i = 0
      let len = v1.length
      while (i < len) {
        if (Number(v1[i]) === Number(v2[i])) {
          i++
          continue
        }
        return Number(v1[i]) > Number(v2[i])
      }
      return false
    },
    getVersion () {
      const pack = require('../../../../package.json')
      let version = pack.version
      let smallVersion = pack.smallVersion
      return this.checkBigVersion(version, smallVersion) ? version : smallVersion
    },
    openQuestion () {
      C.openBrowserWindow('/liveMessage', {}, {
        width: 390,
        height: 600
      })
    },
    openMiniProgram () {
      C.openBrowserWindow('/miniProgram', {}, {
        width: 900,
        height: 600
      })
    }
  },
  mounted: function () {
    this.getAdminInfo()
    this.appVersion = this.getVersion()
    // ipcRenderer.send('_changeMainWindow', remote.getCurrentWindow().id)
  },
  components: { headImg }
}
</script>
<style>
</style>